Add anchor attribute

source

@@ -1043,6 +1043,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   redefined in this specification to be media-independent: <code>b</code>, <code>i</code>,
   <code>hr</code>, <code>s</code>, <code>small</code>, and <code>u</code>.</p>
 
+  <p>The <code data-x="attr-anchor">anchor</code> attribute is presentational, but does not map
+  directly to CSS because it doesn't require an ID relationship to be set up for <code
+  data-x="">anchor-name</code> in CSS and sets <code
+  data-x="dom-anchorElement">Element.anchorElement</code>.</p>
+
 
   <h4>Syntax errors</h4>
 
@@ -4109,8 +4114,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
     </ul>
-   </dd>
 
+    <p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
+    </ul>
+   </dd>
 
    <dt>Intersection Observer</dt>
 
@@ -12968,6 +12978,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
 
   <ul class="brief">
    <li><code data-x="attr-accesskey">accesskey</code></li>
+   <li><code data-x="attr-anchor">anchor</code></li>
    <li><code data-x="attr-autocapitalize">autocapitalize</code></li>
    <li><code data-x="attr-fe-autofocus">autofocus</code></li>
    <li><code data-x="attr-contenteditable">contenteditable</code></li>
@@ -14249,6 +14260,66 @@ interface <dfn interface>DOMStringMap</dfn> {
 
   </div>
 
+  <h5>The <code data-x="attr-anchor">anchor</code> attribute</h5>
+
+  <p>All <span data-x="Element">Elements</span> may have the <dfn element-attr for="html-global"><code
+  data-x="attr-anchor">anchor</code></dfn> attribute set. If specified, the <code
+  data-x="attr-anchor">anchor</code> attribute value must be the <span data-x="concept-ID">ID</span>
+  of an element in the same <span>tree</span> as the element with the <code
+  data-x="attr-anchor">anchor</code> attribute. The <code data-x="attr-anchor">anchor</code>
+  attribute is a presentational attribute which allows authors to set a <span
+  data-x="referenced">reference</span> to the <span>implicit anchor element</span>.
+  <ref>CSSANCHOR</ref></p>
+
+  <p>For an <span data-x="HTML elements">HTML element</span>, its <span>implicit anchor
+  element</span> is its <span data-x="attr-anchor"><code data-x="">anchor</code>-associated
+  element</span>.</p>
+
+  <p>The <dfn data-x="dom-anchorElement"><code>anchorElement</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-anchor">anchor</code> attribute.
+
+  <div class="example">
+   <p>The following example shows how to use CSS anchor positioning by using the <code
+   data-x="attr-anchor">anchor</code> attribute without the need for the <code
+   data-x="">anchor-name</code> CSS property:</p>
+
+   <pre><code class="html">&lt;div id="myanchor">myanchor&lt;/div>
+&lt;div id="target" anchor="myanchor">target&lt;/div>
+
+&lt;style>
+#myanchor {
+  margin: 100px;
+  width: 100px;
+  height: 100px;
+}
+#target {
+  position: absolute;
+  left: anchor(left);
+  top: anchor(bottom);
+  width: 100px;
+  height: 100px;
+}
+&lt;/style></code></pre>
+  </div>
+
+  <pre><code class="idl">partial interface <span id="Element-partial-anchor">Element</span> {
+  [<span>CEReactions</span>] attribute Element? <span data-x="dom-anchorElement">anchorElement</span>;
+};</code></pre>
+
+  <p>To <dfn>get the anchor element</dfn> of an <span>element</span> <var>element</var>:</p>
+
+  <ol>
+   <li><p>Let <var>anchorAttribute</var> be the result of running <span>get an attribute by
+   name</span> given <var>element</var> and <code data-x="attr-anchor">anchor</code>.</p></li>
+
+   <li><p>If <var>anchorAttribute</var> is null, then return null.</p></li>
+
+   <li><p>Return the first <span>element</span> in <span>tree order</span>, within
+   <var>element</var>'s <span>root</span>'s <span data-x="descendant">descendants</span>, whose <span
+   data-x="concept-id">ID</span> is <var>anchorAtribute</var>; otherwise; if there is no such
+   <span>element</span>, null.</p></li>
+  </ol>
+
 
   <h4 id="the-innertext-idl-attribute">The <code data-x="dom-innerText">innerText</code> and <code
   data-x="dom-outerText">outerText</code> properties</h4>
@@ -85144,14 +85215,18 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
   <div class="note">
    <p>The <span>topmost popover ancestor</span> algorithm will return the topmost (latest in the
    <span>showing auto popover list</span>) ancestor popover for the provided popover. Popovers can
-   be related to each other in several ways, creating a tree of popovers. There are two paths
+   be related to each other in several ways, creating a tree of popovers. There are three paths
    through which one popover (call it the "child" popover) can have a topmost ancestor popover (call
    it the "parent" popover):</p>
 
    <ol>
     <li><p>The popovers are nested within each other in the node tree. In this case, the descendant
     popover is the "child" and its topmost ancestor popover is the "parent".</p></li>
 
+    <li><p>A popover has the <code data-x="attr-anchor">anchor</code> attribute set and it points
+    to a node whose ancestor is also a popover. In this case, the popover with the <code
+    data-x="attr-anchor">anchor</code> attribute is the "child".</p></li>
+
     <li><p>An invoking element (e.g., a <code>button</code>) has a <code
     data-x="attr-popovertarget">popovertarget</code> attribute pointing to a popover. In this case,
     the popover is the "child", and the popover subtree the invoking element is in is the
@@ -85217,6 +85292,9 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    <li><p>Run <var>checkAncestor</var> given <var>newPopover</var>'s parent node within the
    <span>flat tree</span>.</p></li>
 
+   <li><p>Run <var>checkAncestor</var> given the result of running <span>get the anchor
+   element</span> given <var>newPopover</var>.</p></li>
+
    <li><p>Run <var>checkAncestor</var> given <var>invoker</var>.</p></li>
 
    <li><p>return <var>topmostPopoverAncestor</var>.</p></li>
@@ -132154,6 +132232,10 @@ dialog:popover-open {
   background-color: Canvas;
 }
 
+[popover][anchor] {
+  inset: auto;
+}
+
 :popover-open::backdrop {
   position: fixed;
   inset: 0;
@@ -139298,6 +139380,11 @@ interface <dfn interface>External</dfn> {
           <code data-x="attr-input-alt">input</code>
      <td> Replacement text for use when images are not available
      <td> <a href="#attribute-text">Text</a>*
+    <tr>
+     <th> <code data-x="">anchor</code>
+     <td> <span data-x="attr-anchor">HTML elements</span>
+     <td> Makes the specified element the <span>implicit anchor element</span> of this element. Also influences the popover hierarchy if the specified element also has the <code data-x="attr-popover">popover</code> attribute.
+     <td> <span data-x="concept-id">ID</span>*
     <tr>
      <th> <code data-x="">as</code>
      <td> <code data-x="attr-link-as">link</code>
@@ -141838,6 +141925,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSALIGN">[CSSALIGN]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
 
+   <dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, J. Tompkins, I. Kilpatrick. W3C.</dd>
+
    <dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>